<!--修改密码-->
<template>
  <div class="app-container" style="width: 700px;margin:0 auto">
    <el-steps :active="currentStep" align-center class="common-step" style="margin-bottom: 25px;">
      <el-step title="验证手机号" />
      <el-step title="修改密码" />
      <el-step title="完成" />
    </el-steps>
    <el-form
      ref="passwordForm"
      :model="passwordForm"
      :rules="passwordRules"
      class="common-form-with-desc"
      status-icon
      style="width: 550px; margin: 0 auto;"
      label-width="100px">
      <div>手机验证码验证 账号 <span class="color-primary"> {{ passwordForm.username }}</span> 为确认是你本人操作，请完成以下验证</div>
      <el-divider style="margin-top: 10px;" />
      <template v-if="currentStep===1">
        <el-form-item label="手机号码:">
          {{ passwordForm.mobile }}
        </el-form-item>
        <el-form-item label="验证码:" prop="verificationCode">
          <verification-code
            v-model="passwordForm.verificationCode"
            :code-device="passwordForm.mobile"
            :height="32"
            :check="false"
            @checkCode="handleCheckCode" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleNext(1)">确定</el-button>
        </el-form-item>
      </template>
      <template v-if="currentStep===2">
        <el-form-item label="旧密码:" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password maxlength="60" show-word-limit autocomplete="off" placeholder="请输入旧密码" />
        </el-form-item>
        <el-form-item label="新密码:" prop="newPassword">
          <password-level v-model="passwordForm.newPassword" placeholder="请输入新密码" />
          <div class="tip">请设置8-16位密码,建议至少包含数字、大小写字母和特殊符号三种类型</div>
        </el-form-item>
        <el-form-item label="密码确认:" prop="newPasswordAgain">
          <el-input v-model="passwordForm.newPasswordAgain" show-password type="password" maxlength="60" show-word-limit autocomplete="off" placeholder="请再次输入新密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleNext(2)">确定</el-button>
        </el-form-item>
      </template>
      <template v-if="currentStep===3">
        <el-form-item>
          <div style="font-size:15px;font-weight:bold">密码修改成功！</div>
          <div class="common-tips">3s后自动退出系统,将重新登录! </div>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    var checkPasswordAgain = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码确认不能为空!'))
      }
      if (value !== this.passwordForm.newPassword) {
        return callback(new Error('两次输入的密码不一致!'))
      }
      return callback()
    }
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('新密码不能为空!'))
      }
      if (value === this.passwordForm.oldPassword) {
        return callback(new Error('新旧密码不能一致!'))
      }
      return callback()
    }
    return {
      currentStep: 1,
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        newPasswordAgain: '',
        verificationCode: ''
      },
      passwordRules: {
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: checkPassword, trigger: 'blur' },
          { validator: this.$validate.validatePassword, trigger: 'blur' }
        ],
        newPasswordAgain: [
          { required: true, validator: checkPasswordAgain, trigger: 'blur' }
        ],
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ]

      }
    }
  },
  watch: {
  },
  created() {
    this.passwordForm = {
      ...this.passwordForm,
      username: this.userInfo.username,
      mobile: this.userInfo.mobile
    }
  },
  mounted() {

  },
  methods: {
    handleNext(step) {
      this.$refs['passwordForm'].validate(valid => {
        if (valid) {
          if (step === 1) {
            this.currentStep = step + 1
          }
          if (step === 2) {
            this.modifyPassword()
          }
        }
      })
    },
    handleCheckCode(val) {
      if (val) {
        this.handleNext(1)
      }
    },
    modifyPassword() {
      this.$refs['passwordForm'].validate(valid => {
        if (valid) {
          this.$store.dispatch('modifyPassword', this.passwordForm).then(response => {
            this.$modal.msgSuccess('密码修改成功')
            this.currentStep = 3
            setTimeout(() => {
              this.logout()
            }, 3000)
          }).catch(() => {
            this.$refs.captchaCode.getCaptchaCode()
            this.passwordForm = {
              ...this.passwordForm,
              verificationCode: ''
            }
          })
        }
      })
    },
    logout() {
      this.$store.dispatch('logout').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
